<template>
  <div class="text_price_range">
    <span class="price_text">价格</span>
    <span class="price_unit_en">￥</span>
    <span class="price_int">{{ min | getPriceInt }}</span>
    <span class="price_float">{{ min | getPriceFloat }}</span>
    <span class="price_range_text">~</span>
    <span class="price_int">{{ max | getPriceInt }}</span>
    <span class="price_float">{{ max | getPriceFloat }}</span>
    <span class="price_unit_ch">元/斤</span>
  </div>
</template>

<script type="text/babel">
  export default {
    name: 'PriceRange',
    props: {
      min: Number,
      max: Number,
      showPriceText: Boolean
    }
  };
</script>

<style scoped lang="less">
  .text_price_range {
    display: flex;
    align-items: baseline;
    color: #f0250f;
    .price_text {
      margin-right: 10px;
      color: #5c5c5c;
      font-size: 24px;
    }
    .price_unit_en {
      font-size: 22px;
    }
    .price_int {
      font-size: 36px;
    }
    .price_float {
      font-size: 30px;
    }
    .price_range_text {
      margin: 0 10px;
      font-size: 36px;
    }
    .price_unit_ch {
      margin-left: 10px;
      font-size: 24px;
    }
  }
</style>